<template>
    <div>
        <BackHeader :title="title" :bgcolor="bgcolor"></BackHeader>
        <div class="mainbox">
            <div class="userinfo">
                <img class="left"
                    src="https://cdn7.axureshop.com/demo/1182587/images/%E5%BC%80%E9%80%9A%E4%BC%9A%E5%91%98/%E6%A4%AD%E5%9C%86%E5%BD%A2_u4881.png">
                <div class="left status">
                    <span class="username">西瓜</span>
                    <br><span>暂未开通会员</span>
                </div>
                <div class="zuanicon">
                    <img src="https://cdn7.axureshop.com/demo/1182587/images/%E5%BC%80%E9%80%9A%E4%BC%9A%E5%91%98/image_png_u4838.png"
                        alt="">
                </div>
            </div>
            <div class="contentbox">
                <p class="title">会员权益</p>
                <ul class="quanyi">
                    <li v-for="item in 8" :key="item">
                        <img src="@/assets/我的/vip-ico.png" alt="">
                        <p>会员福利</p>
                    </li>
                </ul>
                <p class="title">会员套餐</p>
                <ul class="taocan">
                    <li v-for="(item, index) in taocan" :key="index" @click="changebgc(index)"
                        :class="{ bgc: item.bgc }">
                        <p class="tcname">{{ item.tcname }}</p>
                        <p class="price">
                            <span>￥</span><span>{{ item.price.toFixed(2) }}</span>
                        </p>
                        <p class="yuanjia">原价￥{{ item.yuanjia }}</p>
                    </li>
                </ul>
                <p class="xufei">到期按自动续费，可随时取消</p>
                <div class="kaitong" @click="kaitong">
                    立即开通
                </div>
            </div>
        </div>
        <div class="jiazai" v-show="jiazaishow">
            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E7%B1%8D%E8%AF%A6%E6%83%85/u2682.svg"
                alt="">
            <p>正在购买中，请不要离开</p>
        </div>
        <div class="goumaibox" v-show="goumaishow">
            <div>
                <div class="shuru">
                    <img src="https://cdn7.axureshop.com/demo/1182587/images/%E5%BC%80%E9%80%9A%E4%BC%9A%E5%91%98/u4955.png"
                        @click="closeshuru">
                    <span>请输入支付密码</span>
                </div>
                <p class="hycz">会员充值</p>
                <p class="jine">￥139</p>
                <div class="zhifu">
                    <span>支付方式</span>
                    <div>
                        <img src="https://cdn7.axureshop.com/demo/1182587/images/%E5%BC%80%E9%80%9A%E4%BC%9A%E5%91%98/u4958.png"
                            alt="">
                        <span>微信支付</span>
                    </div>
                </div>
                <div class="mima">
                    <input type="password">
                    <input type="password">
                    <input type="password">
                    <input type="password">
                    <input type="password">
                    <input type="password">
                </div>
                <div class="shurukuang">
                   <img src="https://cdn7.axureshop.com/demo/1182587/images/%E5%BC%80%E9%80%9A%E4%BC%9A%E5%91%98/u4961.jpg" alt="">
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import BackHeader from '@/components/mycomponents_jk/BackHeader.vue';
export default {
    name: 'VipCenter',
    components: {
        BackHeader
    },
    data() {
        return {
            title: "会员中心",
            bgcolor: true,
            taocan: [
                {
                    tcname: "连续包年",
                    price: 138.00,
                    yuanjia: 299,
                    bgc: true
                },
                {
                    tcname: "12个月",
                    price: 198.00,
                    yuanjia: 328,
                    bgc: false
                },
                {
                    tcname: "季卡",
                    price: 78.00,
                    yuanjia: 99,
                    bgc: false
                }
            ],
            jiazaishow: false,
            goumaishow: false,
        };
    },

    mounted() {

    },

    methods: {
        changebgc(index) {
            for (let i = 0; i < this.taocan.length; i++) {
                this.taocan[i].bgc = false;
            }
            this.taocan[index].bgc = true;
        },
        kaitong() {
            this.jiazaishow = true;
            let that = this;
            setTimeout(function () {
                that.jiazaishow = false;
                that.goumaishow = true;
            }, 1000)
        },
        closeshuru(){
            this.goumaishow=false
        }
    },
};
</script>

<style lang="less" scoped>
.mainbox {
    padding-top: 6rem;
    background-color: #FFDBAD;
    width: 100%;
    height: 30rem;
    position: relative;

    .userinfo {
        width: 33.1rem;
        height: 15.4rem;
        background: linear-gradient(108deg, rgba(66, 62, 68, 1) 0%, rgba(66, 62, 68, 1) 2%, rgba(24, 21, 24, 1) 98%, rgba(24, 21, 24, 1) 100%);
        position: absolute;
        top: 7rem;
        left: 50%;
        transform: translate(-50%, 0);
        border-radius: 1rem;
        padding: 2rem;

        >img {
            width: 3.8rem;
            height: 3.8rem;
            border-radius: 50%;
            margin-right: 1rem;
        }

        .status {
            font-size: 1.2rem;
            color: #BCBCBC;
            line-height: 2.2rem;

            .username {
                font-size: 1.7rem;
                color: #F1F0F6;
            }
        }

        .zuanicon {
            position: absolute;
            width: 13.1rem;
            height: 12rem;
            right: 0rem;
            top: -3rem;

            img {
                width: 100%;
                height: 100%;

            }
        }
    }

    .contentbox {
        width: 100%;
        min-height: 20rem;
        background-color: #fff;
        position: absolute;
        top: 15rem;
        clip-path: polygon(0% 0%, 10% 1rem, 20% 1.5rem, 30% 2rem, 50% 2.5rem, 80% 3rem, 100% 2.8rem, 100% 100%, 0 100%);
        padding: 4rem 2rem 2rem;

        .title {
            font-size: 1.6rem;
            color: #252525;
            line-height: 2.4rem;
        }

        .quanyi {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 1rem;

            li {
                text-align: center;
                width: 25%;
                margin: 0.8rem 0;

                img {
                    width: 4rem;
                    height: 4rem;
                }

                p {
                    font-size: 1.2rem;
                    color: #252525;
                    line-height: 2rem;
                }
            }
        }

        .taocan {
            margin-top: 1rem;
            display: flex;
            justify-content: space-between;

            li {
                width: 10rem;
                border: 0.1rem solid rgb(224, 224, 224);
                border-radius: 1rem;
                text-align: center;
                padding: 1.5rem 0;

                .tcname {
                    font-size: 1.4rem;
                    color: #000000;
                    line-height: 2rem;
                }

                .price {
                    line-height: 4rem;
                    color: #FF0000;
                    font-size: 1.2rem;

                    span:last-of-type {
                        font-size: 2.4rem;
                    }
                }

                .yuanjia {
                    font-size: 1.2rem;
                    color: #A7A6A7;
                    line-height: 1.8rem;
                }
            }

            .bgc {
                background-color: #f3e7dc;
            }
        }

        .xufei {
            margin: 2.5rem 0 1rem;
            text-align: center;
            color: #707070;
            line-height: 2rem;
            font-size: 1.4rem;
        }

        .kaitong {
            background: linear-gradient(90deg, rgba(237, 217, 199, 1) 0%, rgba(237, 217, 199, 1) 0%, rgba(228, 201, 172, 1) 100%, rgba(228, 201, 172, 1) 100%);
            width: 100%;
            height: 4.4rem;
            line-height: 4.4rem;
            text-align: center;
            font-size: 1.6rem;
            color: #010000;
            border-radius: 0.5rem;
        }

    }
}

.jiazai {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22rem;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 2rem 0;
    border-radius: 1rem;

    img {
        width: 5rem;
        height: 5rem;
    }
}

.goumaibox {
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    animation: showchange ease 0.5s forwards;
    transform-origin: top;
    

    >div {
        width: 100%;
        position: absolute;
        bottom: 0;
        background-color: #fff;
        z-index: 99999;
        text-align: center;
        border-radius: 1.5rem 1.5rem 0 0;

    }

    .shuru {
        position: relative;
        height: 5rem;
        line-height: 5rem;
        font-size: 1.6rem;
        color: #333333;

        img {
            position: absolute;
            left: 2rem;
            top: 50%;
            transform: translateY(-50%);
            width: 1.8rem;
            height: 1.8rem;
        }
    }

    .hycz {
        color: #666666;
        font-size: 1.4rem;
        line-height: 3rem;
    }

    .jine {
        font-weight: 650;
        font-size: 2.8rem;
        color: #333333;
        line-height: 3.5rem;
    }

    .zhifu {
        font-size: 1.4rem;
        color: #868686;
        display: flex;
        justify-content: space-between;
        line-height: 6rem;
        align-items: center;
        padding: 0 1rem;
        img{
            width: 1.4rem;
            height: 1.4rem;
            margin-right: 0.5rem;
        }
    }
    .mima{
        padding: 0 1rem;
        display: flex;
        justify-content: space-around;
        input{
            display: block;
            outline: none;
            width: 4.5rem;
            height: 4.5rem;
            text-align: center;
            font-size: 1.8rem;
            background-color: rgba(242, 242, 242, 0.576470588235294);
            border: 0;
        }
    }
    .shurukuang{
        margin-top: 3rem;
        width: 100%;
        height: 21.6rem;
        img{
            width: 100%;
            height: 100%;
            
        }
    }

}

@keyframes showchange {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}
</style>